<template>
  <div>
    <el-dialog
      id="attachment"
      :visible.sync="show"
      width="950px"
      class="closeIcon"
      :title="title"
      :append-to-body="true"
      @close="close"
    >
      <div class="attachment">
        <div class="left">
          <el-input v-model="cateTitle" placeholder="请输入分类名称">
            <el-button
              slot="append"
              type="primary"
              icon="el-icon-search"
              style="border-radius:3px;border:none;"
              @click="serarchCate"
            />
          </el-input>
          <AttachmentCate ref="AttachmentCate" @update="getAttachmentList" />
        </div>
        <div class="right">
          <div class="flex">
            <div>
              <el-button
                :class="num>0? 'dele':''"
                :disabled="num>0? false:true"
                size="small"
                style="margin-right:10px"
                @click="dele"
              >删除附件</el-button>
              <el-badge :value="num" :hidden="num>0? false:true">
                <el-button
                  :class="num>0? 'orange':''"
                  :type="num>0? 'primary':''"
                  :disabled="num>0? false:true"
                  size="small"
                  @click="choose"
                >使用选中附件</el-button>
              </el-badge>
              <el-upload
                :headers="myHeaders"
                class="attachment_upload"
                :action="$store.getters.updateURL+'attachment/uploadAndSave'"
                :show-file-list="false"
                :on-success="handleSuccess"
                :on-progress="onProgress"
                :data="uploadData"
              >
                <el-button size="small" type="primary" @click="getTypeCate">上传附件</el-button>
              </el-upload>
              <el-button size="small" type="primary" style="margin-right:10px" @click="showDialog = true"> 网络附件</el-button>
              <el-dialog
                id="attachment"
                :visible.sync="showDialog"
                width="950px"
                class="closeIcon"
                title="添加网络附件"
                :append-to-body="true"
              >
                <el-form ref="urlForm" :model="urlForm" :rules="urlRules" label-width="60px">
                  <el-form-item label="名称:" prop="name">
                    <el-input v-model="urlForm.name" />
                  </el-form-item>
                  <el-form-item label="地址:" prop="url">
                    <el-input v-model="urlForm.url" />
                  </el-form-item>
                  <el-form-item label="描述:">
                    <el-input v-model="urlForm.description" type="textarea" />
                  </el-form-item>
                  <div class="btn">
                    <el-button @click="showDialog = false">取消</el-button>
                    <el-button type="primary" @click="uploadUrl">确定</el-button>
                  </div>
                </el-form>
              </el-dialog>

            </div>
            <el-input v-model="name" placeholder="请输入附件名称" style="width:200px">
              <el-button
                slot="append"
                type="primary"
                icon="el-icon-search"
                style="border-radius:3px;border:none; "
                @click="serarchAttachment"
              />
            </el-input>
          </div>

          <div v-loading="loading" class="attachment_box">
            <div
              v-for="item in attachmentData"
              :key="item.id"
              class="attachment_item"
            >
              <div
                v-if="attachmentType == 2"
                id="item"
                @click="handelChoose(item)"
              >
                <el-image
                  :src="item.url"
                  alt=""
                  :class="currentClass(item.id)"
                />
              </div>

              <div
                v-else-if="attachmentType == 3"
                id="video"
                :class=" currentClass(item.id)"
                @click="handelChoose(item)"
              >
                <i class="el-icon-video-camera" />
              </div>
              <div
                v-else
                id="video"
                :class=" currentClass(item.id)"
                @click="handelChoose(item)"
              >
                <i class="el-icon-tickets" />
              </div>
              <p class="attachment_name">{{ item.name }}</p>
            </div>
            <div class="attachment_item seat" />
            <div class="attachment_item seat" />
            <div class="attachment_item seat" />
            <div class="attachment_item seat" />
          </div>
          <el-pagination
            :current-page="page.currentPage"
            :page-sizes="page.pageSizes"
            :page-size="page.size"
            layout="total, prev, pager, next, jumper"
            :total="page.total"
            :hide-on-single-page="page.total<page.size?true:false"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
var token = 'Bearer ' + getToken()
import attachmentApi from '@/api/system/attachment'
export default {
  props: {
    title: {
      type: String,
      default: '选择图片'
    },
    dialogShow: {
      type: Boolean,
      default: false
    },
    attachmentType: {
      default: 2
    }
  },
  data() {
    return {
      uploadData: {
        type: 2,
        attachment_cate_id: 0
      },
      showDialog: false,
      urlForm: {
        name: '',
        url: '',
        description: '',
        storage: 1
      },
      urlRules: {
        name: [
          { required: 'true', message: '请输入附件名', trigger: 'blur' }
        ],
        url: [
          { required: 'true', message: '请输入附件地址', trigger: 'blur' }
        ]
      },
      cateTitle: '',
      cateList: [], // 附件分类列表
      show: false,
      fullscreen: false,
      loading: false,
      num: 0,
      attachmentData: [],
      imagelist: [],
      myHeaders: { Authorization: token },
      headers: {},
      logoUrl: '',
      wechatUrl: '',
      imgUrl: this.$store.getters.updateURL,
      page: {
        total: 0,
        currentPage: 1,
        size: 18,
        pageSizes: [18]
      }, // 分页器
      currentNumber: [],
      currentItem: [],
      is_used: false,
      name: ''
    }
  },
  watch: {
    dialogShow: function(newQuestion, oldQuestion) {
      this.show = newQuestion
    },
    attachmentType(val, value) {
      // console.log(val, value, '------------------')
    }
  },
  created() {
    this.getAttachmentList()
  },
  mounted() {
    // console.log(this.show, '----------------')
    if (this.show) {
      this.getAttachmentList()
    }
  },
  methods: {
    // 添加网络附件
    uploadUrl() {
      const val = []
      val.push(this.urlForm)
      attachmentApi.attachmentSave(val).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.showDialog = false
          this.getAttachmentList(this.$refs.AttachmentCate.cate_id)
        } else {
          this.$message.error(res.smsg)
        }
      })
    },
    // 搜索附件分类
    serarchCate() {
      this.$refs.AttachmentCate.getCateList(this.cateTitle)
    },
    // 搜索附件
    serarchAttachment() {
      // console.log(this.$refs.AttachmentCate.cate_id)
      this.getAttachmentList(this.$refs.AttachmentCate.cate_id)
    },
    // 附件类别
    // getCateList() {
    //   attachmentApi.cateList().then(res => {
    //     if (res.code == 0) {
    //       this.cateList = res.data
    //     } else {
    //       this.$message.error(res.msg)
    //     }
    //   })
    // },
    // 删除图片
    dele() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        attachmentApi.attachmentDelete({ id: this.currentNumber }).then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.getAttachmentList()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    fullScreen() {
      this.fullscreen = !this.fullscreen
    },
    close() {
      this.$emit('update:dialogShow', this.show)
    },
    // 选中图片
    handelChoose(item) {
      console.log(item)
      // this.show = true
      const isIn = this.currentNumber.indexOf(item.id)
      if (isIn == -1) {
        this.currentNumber.push(item.id)
        this.currentItem.push(item)
      } else {
        this.currentNumber.splice(isIn, 1)
        this.currentItem.splice(isIn, 1)
      }
      this.num = this.currentNumber.length
    },
    currentClass(index) {
      const isIn = this.currentNumber.indexOf(index)
      // console.log(this.currentNumber, index, '----------------')
      if (isIn != -1) {
        return 'active'
      }
    },
    // 选择附件
    choose() {
      this.$emit('func', this.currentItem)
    },
    // 附件列表
    getAttachmentList(id) {
      this.is_used = false
      const val = {
        limit: this.page.size,
        page: this.page.currentPage,
        type: this.attachmentType,
        cate_id: id,
        name: this.name
      }

      this.currentNumber = []
      this.currentItem = []
      this.num = 0
      attachmentApi.attachmentList(val).then(res => {
        if (res.code == 0) {
          this.attachmentData = res.data
          // console.log(this.attachmentData, '=====================')
          this.$forceUpdate()
          this.page.total = res.count
          this.imagelist = []
          // 获取每张图片的地址
          for (var x = 0;x < this.attachmentData.length;x++) {
            this.imagelist.push(this.attachmentData[x].url)
          }
          // 根据图片顺序（index）更改每张图片绑定的list的图片顺序
          for (var i = 0;i < this.attachmentData.length;i++) {
            var container = this.imagelist
            var frontArr = container.slice(0, i)
            var begindArr = container.slice(i, this.attachmentData.length)
            var list = begindArr.concat(frontArr)
            this.attachmentData[i].list = list
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 点击上传
    getTypeCate() {
      this.uploadData.attachment_cate_id = this.$refs.AttachmentCate.cate_id
      // console.log(this.$refs.AttachmentCate.cate_id)
    },
    // 上传中
    onProgress() {
      this.loading = true
    },
    // 上传成功
    handleSuccess(res, file, fileList) {
      this.loading = false
      if (res.code == 0) {
        this.getAttachmentList(this.$refs.AttachmentCate.cate_id)
      }
    },
    // 分页规格改变
    handleSizeChange(val) {
      this.page.size = val
      this.page.currentPage = 1
      this.getAttachmentList()
    },
    // 分页点击
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getAttachmentList()
    }
  }
}
</script>
<style lang='scss'>
.attachment{
  .el-badge{
    margin-right: 10px;
  }
  .el-badge__content.is-fixed{
    right: 12px;
  }
  .el-badge__content{
    background-color: #f84311;
    border-color: #f84311;
  }
}

#attachment{
   // 浅橙色
  .orange.el-button--primary{
    background-color: #fe872b;
  }
  //黄色
  .yellow.el-button--primary{
    background-color: #f9b633;
  }
   //默认按钮
  .el-button--primary{
    color: #fff;
    background-color: #f84311;
    border-color: #EDEEF3;
    border-radius: 30px;
  }
  //灰色 删除
  .el-button.dele{
    color: #333;
    background-color: #dddddd;
    border-color: #edeef3;
    border-radius: 16px;
  }
  .el-button{
    border-radius: 20px;
  }
  .el-dialog__header {
      background: #fff !important;
      border-radius: 10px 10px 0 0 !important;
      padding: 10px 20px 1px;
  }
  .el-dialog__headerbtn {
      right: 30px;
      top: 15px;
      width: 25px;
      height: 25px;
      background: url('../../assets/close.png') left no-repeat;
      background-size: cover;
    }
    .el-dialog__body{
      padding: 15px 20px;
    }
  .el-dialog__title{
      color: #f84311;
      font-size: 20px;
      font-weight: bold;
      line-height: 36px;
      // font-family: MicrosoftYaHei-Bold;
  }
  .el-dialog__title::before{
    display: inline-block;
    width: 4px;
    height: 20px;
    margin-right: 15px;
    border-radius: 4px;
    background-color: #f84311;
    vertical-align: middle;
    content: '';
  }
  .el-input-group__append, .el-input-group__prepend{
    background-color: #f84311;
    color: #fff;
    border: none;
  }
}

</style>
<style scoped lang='scss'>
.flex{
  display: flex;
  justify-content: space-between;
}
.btn{
  text-align: center;
}
.attachment{
    display: flex;
    .el-pagination{
      margin-top: 10px;
      margin-bottom: 0 !important;
    }
    .left{
      width: 225px;
      // background-color: #ff0;
      margin-right: 10px;
    }
    .right{
      width: calc(100% - 220px);
      border-left: solid 1px #ddd;
      padding-left: 10px;
      .attachment_upload{
        display: inline;
        margin-right: 10px;
      }
      .attachment_box{
      margin-top: 20px;
      height: 400px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content:flex-start;
      .attachment_item.seat{
        height: 0;
      }
      .attachment_item{
        width: 16%;
        // margin-bottom: 10px;
        .active.el-image, .active#video{
          border: solid 2px #f84311;
        }
        .el-image{
          width: 100%;
          height: 100px;
          cursor: pointer;
          background-color: #eee;
        }
        #video{
           width: 100%;
          height: 100px;
          cursor: pointer;
          background-color: rgba(0,0,0,0.2);
          text-align: center;
          .el-icon-video-camera, .el-icon-bell, .el-icon-tickets{
            line-height: 100px;
            font-size: 25px;
          }
        }
        p{
          display: block;
          width: 100%;
          height: 35px;
          line-height: 35px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    }

}
</style>
